<template lang="html">
  <div class="joinshopping-box">
    <div class="joinshopping-warp">
      <div class="shoppingcar">
        <div class="joinshopping-title">
          <h2>加入购物车</h2>
        </div>
        <div class="joinshopping-icon1">
          <i class="iconfont one-icon icon-jiahao"></i>
        </div>
        <div class="joinshopping-pic1">
          <p>食谱</p>
          <img src="../../assets/img/workshop/sl17.png" alt="">
        </div>
        <div class="icon-box">
          <div class="joinshopping-icon2">
            <i class="iconfont two-icon icon-jiahao"></i>
          </div>
          <div class="joinshopping-icon3">
            <i class="iconfont three-icon icon-jiahao"></i>
          </div>
        </div>
        <div class="joinshopping-pic2">
          <p>单品</p>
          <img  src="../../assets/img/workshop/order.gif" alt="">
          <img  src="../../assets/img/workshop/sl16.png" alt="">
        </div>
      </div>
    </div>
  </div>
</template>

<script>



export default {
  name:"Joinshopping",
  data(){
    return{

    }
  },
  // methods:{
  //   cartthis1(event){
  //     // 当点击是发送数据
  //     this.$emit("getInfo",this.cartthis1); //将发送的数据写好了 等在父级接收 父亲通过key:getInfo取数据
  //   }
  // }
}
</script>

<style lang="less" scoped>
.joinshopping-box{
  width: 100%;
  height: 6rem;
  background: #fff;
  margin-top: 0.3rem;
  .joinshopping-warp{
    width:95%;
    height: 6rem;
    margin: 0 auto;
    .shoppingcar{
      width: 100%;
      height: 0.5rem;
      position: relative;
      bottom: 0;
      right: 0;
      .one-icon{
        width:13%;
        height: 1rem;
        position: absolute;
        font-size: 0.7rem;
        margin-left: 5.6rem;
        color: #2FA674;
      }
      .joinshopping-title{
        width: 100%;
        height: 0.8rem;
        h2{
          font-weight: normal;
          font-size: 0.4rem;
        }
      }
      .joinshopping-icon1{
        width: 100%;
        height: 1rem;
      }
      .joinshopping-pic1{
        width: 100%;
        height: 2rem;
        margin-top: -0.2rem;
        p{
          float: left;
          height: 2rem;
          line-height: 2rem;
        }
        img{
          width:70%;
          height: 2rem;
          margin-left: 0.3rem;
        }
      }
      .joinshopping-icon2{
        width: 100%;
        height: 1rem;
        margin-top: 0.1rem;
      }
      .icon-box{
        width: 100%;
        height: 1rem;
        .joinshopping-icon2{
          width: 50%;
          height: 1rem;
          .two-icon{
            width: 13%;
            height: 1rem;
            position: absolute;
            font-size: 0.7rem;
            margin-left: 3rem;
            color: #2FA674;
            margin-top: 0.2rem;
          }
        }
        .joinshopping-icon3{
          width: 50%;
          height: 1rem;
          .three-icon{
            width: 13%;
            height: 1rem;
            position: absolute;
            font-size: 0.7rem;
            margin-left: 5.7rem;
            margin-top: -0.8rem;
            color: #2FA674;
          }
        }
      }
      .joinshopping-pic2{
        width: 100%;
        height: 2rem;
        padding-bottom: 1rem;
        p{
          float: left;
          height: 2rem;
          line-height: 2rem;
        }
        img{
          width: 33%;
          height: 2rem;
          margin-left: 0.3rem;
        }
      }
    }
  }
}
</style>
